<%--
  Created by IntelliJ IDEA.
  User: djw
  Date: 2020/8/10
  Time: 11:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>
<html>
<head>
    <title>个人信息</title>
    <link rel="stylesheet" href="<%=basePath%>static/css/pintuer.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/admin.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css">
    <script src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
</head>
<body>
<table class="table table-hover text-center">
    <tr>
        <th width="10%">管理员编号</th>
        <th width="10%">姓名</th>
        <th width="10%">性别</th>
        <th width="10%">年龄</th>
        <th width="10%">密码</th>
        <th width="10%">操作</th>
    </tr>
    <tbody id="tb">

    </tbody>

    <div id="window"
         style="position: absolute;left: 30%;top:20%;width: 220px;height: 170px;background-color: darkgrey;display: none;">
        id号：<input type="text" name="aid" id="aid" readonly="true">
        编号：<input type="text" name="ano" id="ano" readonly="true">
        密码：<input type="text" name="apwd" id="apwd">
        姓名：<input type="text" name="aname" id="aname" readonly="true">
        性别：<input type="text" name="sex" id="sex" readonly="true">
        年龄：<input type="text" name=age" id="age" readonly="true">

        <input class="button border-main icon-plus-square-o"  type="button" value="修改密码" onclick="updatePwd()">
        <input class="button border-main icon-plus-square-o" onclick="closeWindow()" type="reset" value="返回">
    </div>
</table>

</body>
</html>

<script>
    //文档加载后要执行的函数
    // jQuery库封装后的写法
    $(document).ready(function () {
        loadData();
    });

    function closeWindow() {
        $("#window").hide();
    }

    function loadData() {
        //jquery的ajax请求方法
        var aid = $("#aid").val();
        $.ajax({
            url: "<%=basePath%>AdminInfoServlet",//请求的服务器地址
            type: "get",//请求类型
            data: {"id": ${ID}},
            dataType: "json",//响应的数据类型 text
            success: function (data) {//与服务器连接成功 需要执行的函数

                //把数据添加到表格中
                var html = "";
                html = "<tr>" +
                    "<td>" + data.aid + "</td>" +
                    "<td>" + data.ano + "</td>" +
                    "<td>" + data.aname + "</td>" +
                    "<td>" + data.apwd + "</td>" +
                    "<td>" + data.sex + "</td>" +
                    "<td>" + data.age + "</td>" +
                    "<td>" +
                    "<button class=\"button border-main icon-plus-square-o\" type='button' onclick='updateWindow(this)'>修改</button>" +
                    "</td>" +
                    "</tr>"

                $("#tb").html(html);
            },
            error: function (data) {//与服务器连接失败或者有错误 需要执行的函数，可以省略不写

            }
        })
    }
    function updateWindow(obj) {
        //显示修改的模态框
        //$("#window").show();
        $("#window").show();
        //获取当前选中行的所有数据
        var aid = $(obj).parent().parent().find("td").eq(0).text()
        var ano = $(obj).parent().parent().find("td").eq(1).text()
        var aname = $(obj).parent().parent().find("td").eq(2).text()
        var apwd = $(obj).parent().parent().find("td").eq(3).text()
        var sex = $(obj).parent().parent().find("td").eq(4).text()
        var age = $(obj).parent().parent().find("td").eq(5).text()

        //把选中行的数据复制给修改框里的表单元素
        $("#aid").val(aid);
        $("#ano").val(ano);
        $("#aname").val(aname);
        $("#apwd").val(apwd);
        $("#sex").val(sex);
        $("#age").val(age);

        //把选中行的数据复制给修改框里的表单元素

    }

    //修改操作
    function updatePwd() {
        //获取文本框的值
        var password = $("#apwd").val();
        console.log(password);
        $.ajax({
            url: "<%=basePath%>admin/queryAdmin",
            type: "get",
            data: {
                "id": ${ID},
                "password": password,
            },
            dataType: "json",//传json
            success: function (data) {
                console.log(data)
                alert("修改成功！！！")
                //关闭模态框
                $("#window").hide();
                //刷新
                loadData();

            }
        })
    }

</script>
